<template>
    <div>
        <el-button type="primary" @click="toPrintTemplate()">打印模板设置</el-button>

        <div
            :style="{
                width: boxW + 'px',
                height: boxH + 'px',
                position: 'absolute',
                left: left + 'px',
                top: top + 'px',
                background: '#ec8654',
                cursor: cursorStyle
            }"
            @mousemove="handleMousemove"
        >
            <Dot />
        </div>
    </div>
</template>

<script>
    import Dot from '@/components/PrintTemplate/dot'

    export default {
        name: 'Preview',

        components: { Dot },

        computed: {
            getCursorStyle() {
                return (e) => {
                    let name = 'default'
                    let clientX = e.clientX
                    let clientY = e.clientY

                    if (clientY - this.top > -5 && (clientY - this.top) < 5) {
                        name = 'n-resize'
                    } else if (clientY > this.top + this.boxH - 5 && clientY < this.top + this.boxH + 5) {
                        name = 's-resize'
                    } else if (clientX - this.left > -5 && (clientX - this.left) < 5) {
                        name = 'w-resize'
                    } else if (clientX > this.left + this.boxW - 5 && clientX < this.left + this.boxW + 5) {
                        name = 'e-resize'
                    }

                    this.cursorStyle = name
                }
            }
        },

        data() {
            return {
                boxW: 120,
                boxH: 60,
                left: 100,
                top: 100,
                cursorStyle: 'default'
            }
        },

        methods: {
            // 跳转到打印模板设置页面
            toPrintTemplate() {
                this.$router.push({
                    path: '/PrintTemplate'
                })
            },

            handleMousemove(e) {
                this.getCursorStyle(e)
                e.preventDefault()
            }
        }
    }
</script>

<style scoped>
    
</style>